import React, { createContext, useState, useContext } from 'react';
import Child from '@/pages/test/useContextExtra';
import { Button } from 'antd';

const Context = createContext(null);

const App = () => {
  const [n, setN] = useState(0);
  return (
    // @ts-ignore
    <Context.Provider value={{ n, setN }}>
      <div className={'app'}>
        <p>最高层级展示的值：{n}</p>
        <p>
          Baba展示：
          <Baba />
        </p>
      </div>
    </Context.Provider>
  );
};

function Baba() {
  // @ts-ignore
  const { n, setN } = useContext(Context);
  return (
    <div>
      我是爸爸 n: {n}
      这里控制n ：
      <Button onClick={() => setN((v: number) => v + 2)}>Baba N</Button>
      <br />
      <Child />
    </div>
  );
}

export { Context };

export default App;
